<template>
  <div class="active-interception-center">
    <div id="map_echarts"></div>
  </div>
</template>

<script>
  // import dxWrap from "@/components/customComponents/dxWrap.component.vue";
  import mapJson from "@/components/center/putuo";
  import * as echarts from "echarts";
  export default {
    name: 'activeInterceptionCenter',
    components: {
      // dxWrap
      // commonDialog,
    },
    data () {
        return {

        }
    },
    methods: {
      initEcharts() {
        const geoJson = mapJson;
        echarts.registerMap('putuo', geoJson);
        let geoCoordMap = {
          "万里街道":[121.40176795438592,31.270445754856226],
          "万里街道2":[121.40156795438592,31.270445754856226],
          "万里街道3":[121.40156795438592,31.270405754856226],
          "万里街道4":[121.40156795438592,31.260305754856226],
          "万里街道5":[121.40156795438592,31.260305754856226],
          "万里街道6":[121.40126795438592,31.264355754856226],
          "万里街道7":[121.40626795438592,31.262355754856226],
          "桃浦镇":[121.36173900763136,31.282543145109425],
        };
        let convertData = function (data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push(geoCoord.concat(data[i].value));
            }
          }
          return res;
        };
        let option = {
          geo: {
            map: 'putuo',
            label: {
              show: true, // 默认显示区域名称
              textStyle: {
                color: '#a6e5ff', // 文字颜色
                fontSize: 12, // 文字大小
                fontFamily: '微软雅黑',
              },
              emphasis: {
                show: true,
                color: '#a6e5ff', // 文字颜色

              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#3c72b1',
                borderColor: '#024277'
              },
              emphasis: {
                areaColor: '#024277',
              },
            }
          },
          visualMap: {
              min: 0,
              max: 500,
              splitNumber: 5,
              inRange: {
                  color: ['#d94e5d','#eac736','#50a3ba'].reverse()
              },
              textStyle: {
                  color: '#fff'
              }
          },

          series: [{
            name: 'putuo',
            type: 'heatmap',
            coordinateSystem: 'geo',
            emphasis: {
              itemStyle: {
                color: 'green', // 悬停时的颜色
              }
            },
            data: convertData([
              {name: "万里街道", value: 500},
              {name: "万里街道2", value: 500},
              {name: "万里街道3", value: 100},
              {name: "万里街道4", value: 500},
              {name: "万里街道5", value: 200},
              {name: "万里街道6", value: 500},
              {name: "万里街道7", value: 500},
              {name: "桃浦镇", value: 500},
            ]),
            // data: [
            //   {name: "万里街道", value: 500},
            //   {name: "桃浦镇", value: 200},
            // ],
            label: {
              show: true, // 是否显示区域名称
              textStyle: {
                color: '#a6e5ff', // 文字颜色
                fontSize: 16, // 文字大小
                fontFamily: '微软雅黑',
                backgroundColor: 'rgba(0,0,0,0)', // 透明度0清空文字背景
              },
            },

          }]
        };
        let myChart = this.$echarts.init(document.getElementById('map_echarts'))
        myChart.setOption(option)
      }
    },
    mounted () {
      this.initEcharts();
    }
  }
</script>
<style lang="stylus">
  .active-interception-center {
    height: 100%;
    #map_echarts {
      height: inherit;
    }
  }
</style>
